<!-- NowTicketInfo -->
<template>
  <div>
    <el-card  class="box-card box-cardCustomer">
      <div slot="header"
           class="clearfix"
           @click="changeArrow">
        <div style="display:flex;justify-content: space-between">
          <div style="display:flex;align-items:center">
            <img class="firstIcon"
                 src="@/assets/ticket/review.png">
            <el-tooltip :open-delay="1000" class="item" effect="dark" :content="$t('custom.component.gadget.copyTicketNumber')" placement="top">
              <img src="@/assets/ticket/copy.png"
                  style="margin-left:10px"
                  v-if="nextTicketInfo.entity.id"
                  @click.stop="copyTicketId(nextTicketInfo.entity.id ?nextTicketInfo.entity.id:'')">
            </el-tooltip>
            <el-tooltip :open-delay="1000" class="item" effect="dark" :content="$t('custom.component.gadget.halo')" placement="top">
              <div style="flex-shrink:0" class="span1" @click.stop="toTicket(nextTicketInfo.entity.id ?nextTicketInfo.entity.id:'')">[{{ nextTicketInfo.entity&&nextTicketInfo.entity.id ?nextTicketInfo.entity.id:''}}]</div>
            </el-tooltip>
            <span class="span_"> - </span>
            <span class="span2" style="display:inline-block;margin-left:4px">{{ nextTicketInfo.entity&&nextTicketInfo.entity&&nextTicketInfo.entity.summary?nextTicketInfo.entity.summary:'' }}</span>
            <span></span>
          </div>
          <div class="rightContent" style="display:flex;align-items:center">
            <span>|</span>
             <el-tooltip :open-delay="1000" class="item" effect="dark" :content="$t('custom.component.gadget.halo')" placement="top">
                <img src="https://oss.mspbots.ai/files/halo.png"
                 @click.stop="toTicket(nextTicketInfo.entity.id ?nextTicketInfo.entity.id:'')">
              </el-tooltip>

            <el-icon :class="arrowCustomer"></el-icon>
          </div>
        </div>
      </div>
      <el-collapse-transition>
        <div v-if="showPanel&&nextTicketInfo.entity&&nextTicketInfo.entity"
              class="box-cardCustomer-content">
          <el-row class="table1row">
            <el-col :span="6">Title:</el-col>
            <el-col :span="18">{{ nextTicketInfo.entity&&nextTicketInfo.entity.summary ?nextTicketInfo.entity.summary:'' }}</el-col>
          </el-row>
          <el-row class="table1row">
            <el-col :span="6">{{ $t('custom.nextTicket.status') }}:</el-col>
            <el-col :span="18">{{ nextTicketInfo.entity&&nextTicketInfo.entity.status_name&&nextTicketInfo.entity.status_name?nextTicketInfo.entity.status_name:'' }}</el-col>
          </el-row>
          <el-row class="table1row">
            <el-col :span="6">Create Date:</el-col>
            <el-col :span="18">{{ nextTicketInfo.entity&&nextTicketInfo.entity.dateoccurred ? formatData(nextTicketInfo.entity.dateoccurred):''}}</el-col>
          </el-row>
          <!-- <el-row class="table1row">
            <el-col :span="6">{{ $t('custom.nextTicket.dueDate') }}:</el-col>
            <el-col :span="18">{{ nextTicketInfo.entity&&nextTicketInfo.entity.duedate?formatData(nextTicketInfo.entity.duedate):'' }}</el-col>
          </el-row> -->
          <el-row class="table1row">
            <el-col :span="6">Priority:</el-col>
            <el-col :span="18">{{ nextTicketInfo.entity&&nextTicketInfo.entity.priority_name&&nextTicketInfo.entity.priority_name?nextTicketInfo.entity.priority_name:'' }}</el-col>
          </el-row>
          <el-row class="table1row">
            <el-col :span="6">PrimaryAssignee:</el-col>
            <el-col :span="18">{{ nextTicketInfo.entity&&nextTicketInfo.entity.user_name&&nextTicketInfo.entity.user_name?nextTicketInfo.entity.user_name:'' }}</el-col>
          </el-row>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script>
import { GlobalDateformat } from '@/utils/common'
import { recordUserHyperlinks } from '@/components/gadget/next-ticket-view/components/common'
export default {
  name: 'NowTicketInfoHalo',
  props: {
    nextTicketInfoCopy: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      arrowCustomer: 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer',
      showPanel: true,
      activePannel: ['pannel'],
      nextTicketInfo: this.nextTicketInfoCopy
    }
  },
  watch: {
    nextTicketInfoCopy: {
      handler: function (val) {
        this.nextTicketInfo = val
      },
      deep: true
    }
  },
  created () {
  },
  methods: {
    // timeformat (time) {
    //   return GlobalTimeformat(time, 'HH:mm')
    // },
    formatData (value) {
      return GlobalDateformat(value, this.$store.state.user.timeFormat)
    },
    changeArrow () {
      this.arrowCustomer = this.arrowCustomer === 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
        ? 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer'
        : 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
      this.showPanel = !this.showPanel
    },
    toTicket (val) {
      if (!val) {
        return this.$message.error('Please Select filter')
      }
      if (this.nextTicketInfo && this.nextTicketInfo.entity && this.nextTicketInfo.entity.link) {
        const url = this.nextTicketInfo.entity.link
        window.open(url, '_blank')
        let params = {
          type: 'halo',
          url: this.nextTicketInfo.entity.link,
          ticketId: this.nextTicketInfo.entity.id ? this.nextTicketInfo.entity.id : '',
          action: 'click Through',
          data: this.nextTicketInfo
        }
        recordUserHyperlinks(this, params)
      }
    },
    copyTicketId (data) {
      if (!data) {
        return this.$message.error('No Ticket Id!')
      }
      const url = data
      const oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      oInput.remove()
      this.$message.success('Copy Success')
      let params = {
        type: 'autotask',
        url: this.nextTicketInfo.entity.link,
        ticketId: this.nextTicketInfo.entity.id ? this.nextTicketInfo.entity.id : '',
        action: 'Copy',
        data: this.nextTicketInfo
      }
      recordUserHyperlinks(this, params)
    }
  }

}
</script>
<style scoped>
.box-cardCustomer >>> .el-card__body {
  padding: 0px !important;
}
.box-cardCustomer >>> .el-card__header {
  cursor: pointer;
  height: auto!important;
  padding: 18px 10px;
}
.firstIcon {
  height: 20px;
  width: 20px;
  margin-top: -4px;
}
.span1 {
  margin-left: 10px;
  color: #FA8C16;
  font-size: 16px;
  font-weight: 500;
  text-decoration:underline
}
.span_{
  margin-left: 5px;
  color: #FA8C16;
  font-size: 16px;
  font-weight: 500;
}
.span2 {
  /* margin-left: 10px; */
  color: #138dc7;
  font-size: 16px;
  font-weight: 500;
}
.table1row {
  line-height: 30px;
  /* margin-left: 30px; */
  text-align: left;
}
.table1row > div:nth-child(1) {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.5);
}
.table1row > div:nth-child(2) {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.box-cardCustomer-content {
  padding: 20px 10px 20px 40px;
}
.clearfix {
  vertical-align: middle;
  text-align: left;
}
.el-icon-arrowCustomer {
  float: right;
  padding: 3px 0;
}
.rightContent {
  display: flex;
}
.rightContent > img {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}
.rightContent > span {
  margin-right: 10px;
  color: #f0f0f0;
}
</style>
